<template>
    <div class="daily">
        <!-- 搜索区域 -->
        <div class="search-area">
            <div>
                <el-row :gutter="20" style="display: flex;align-items: center;justify-content: space-between;">
                    <div style="display: flex;align-items: center;justify-content: space-between;">
                        <el-col :span="18">
                            <p>时间</p>
                            <el-date-picker v-model="datepicker" type="daterange" range-separator="To"
                                start-placeholder="开始时间" end-placeholder="结束时间" size="default" />
                        </el-col>
                    </div>
                </el-row>
            </div>

            <div>
                <el-button @click="handleSearch">搜索</el-button>
            </div>


        </div>

        <!-- 数据表格 -->
        <div class="table-container">
            <el-table :data="tableData" style="width: 100%;" border stripe
                :header-cell-style="{ background: '#f5f7fa' }">
                <!-- 表格列定义保持不变 -->
                <el-table-column prop="userId" label="用户ID" min-width="120" />
                <el-table-column prop="username" label="用户名" min-width="120" />
                <el-table-column prop="role" label="角色" min-width="120" />
                <el-table-column prop="addredd" label="IP地址" min-width="120" />
                <el-table-column prop="type" label="操作类型" min-width="160" />
                <el-table-column prop="result" label="操作结果" min-width="160" />
                <el-table-column prop="time" label="操作时间" min-width="160" />
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination v-model:currentPage="pagination.currentPage" v-model:page-size="pagination.pageSize"
                    :total="pagination.total" :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" background="true" />
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { sysloglist } from "@/api/daily";

// 搜索表单
const datepicker = ref('')

// 原始表格数据
const tableData = ref([])

// 分页配置
const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0
});

// 拉取数据 
const fetchData = () => {
    const parmas = {
        token: localStorage.getItem('token'),
        userId: localStorage.getItem('userId'),
        pageNum: pagination.currentPage,
        pageSize: pagination.pageSize
    }
    sysloglist(parmas)
        .then((res) => {
            if (res.code === 200) {

                tableData.value = res.data.records;


            }
        })
        .catch((err) => {
            console.error('发送失败:', err);
        });
};

// 搜索功能
const handleSearch = () => {
    // 重置到第一页
    pagination.currentPage = 1;
    fetchData();
};

// 分页大小变化
const handleSizeChange = (size) => {
    pagination.pageSize = size;
    fetchData();
};

// 当前页变化
const handleCurrentChange = (page) => {
    pagination.currentPage = page;
    fetchData();
};

//  首次加载 
fetchData()
</script>
<style scoped lang="scss">
.daily {
    .search-area {
        background-color: #fff;
        border-radius: 10px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding: 10px;
    }

    .table-container {
        margin-top: 20px;
    }

    .title-ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .pagination-container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 20px;
    }

    .custom-pagination {
        --el-pagination-hover-bg-color: #f5f7fa;
        --el-pagination-bg-color: transparent;
        --el-pagination-text-color: #606266;
        --el-pagination-button-disabled-bg-color: #f5f7fa;
        --el-pagination-button-disabled-text-color: #c0c4cc;
    }

    .pagination-pages {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }

    .pagination-btn {
        min-width: 32px;
        height: 32px;
        padding: 0;
        margin: 0 4px;
        background-color: transparent;
        border: 1px solid #dcdfe6;
        color: #606266;
        font-size: 14px;
        cursor: pointer;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pagination-btn:hover {
        color: #409eff;
    }

    .pagination-btn.active {
        background-color: #409eff;
        color: #fff;
        border-color: #409eff;
    }

    .pagination-btn.disabled {
        color: #c0c4cc;
        cursor: not-allowed;
    }

    .ellipsis {
        padding: 0 4px;
        color: #606266;
        font-size: 14px;
    }

}
</style>